<html>

<head>
    <meta charset="UTF-8">
    <title>数据源链路情况</title>
    <!-- <link rel="stylesheet" href="css/public.css" /> -->
    <link rel="stylesheet" href="css/int-res.css" />
    <script type="text/javascript" src="js/lib/jQuery/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="js/lib/echarts.js"></script>
    <!--<script type="text/javascript" src="js/lib/echarts-all.js"></script>-->
    <script type="text/javascript" src="js/lib/china.js"></script>
    <script type="text/javascript" src="js/core/map.js"></script>
    <script type="text/javascript" src="js/core/tab.js"></script>
    <script src="js/lib/beijing.js" type="text/javascript" charset="utf-8"></script>
    
    <style>
     .map{
        width:1920px;
        height:950px;
        position:absolute;
        top:70px;
        left:0;
        display: none;
     }
     .line{
        /*width:40%;*/
         width:35%;
        /*height:530px;*/
        position:absolute;
         height:463px;
        bottom:70px;
        right:50px;
        background:url(images/line-back.png) no-repeat center center;
        background-size: 100% 100%;
    }
    #line,#line2,#line3{
        /*width:100%;*/
        width:672px;
        /*height: 100%;*/
        height:463px;
        position:relative;
        display: none;
        /*left:20px;*/
    }
    #line,#line2{
        left:20px;
    }
    #line3{
        left:0;
    }
    .legendbg{
        position:absolute;
        right:150px;
        /*top:180px;*/
        width:356px;
        top:237px;
        height: 216px;
        background:url(images/legendbg.png) no-repeat center center;
        background-size: 100% 100%;
    }
    .legendbg p span{
        display: inline-block;
        width:81px; 
        height: 5px;
        /*margin-top: 20px;*/
        /*margin-left: 5px;*/
    }
    .legendbg p{
        position:relative;
        left:80px;
        height:40px;
        z-index:9;
        color:#fff;
        font-size: 28px;
        line-height: 40px;
        cursor: pointer;
    }
    .yewu{
        top:49px;
    }
    .yewu span{
        background:#fff;
    }
    .hlw{
        top:45px;
    }
    .hlw span{
         background: #4be83c;
    }
    .zx{
        top:41px;
    }
    .zx span{
       background: #fdc02d; 
    }
    .num{
        padding :42px 0;
        position:absolute;
        right:150px;
        /*top:180px;*/
        width:356px;
        top:237px;
        height: 130px;
    }
    .num li{
        width:100%;
        height:40px;
        margin-bottom: 10px;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <div class="int-main-container" >
        <div class="int-main-top">
            <div class="int-top-lf">
                <h1>数据源链路情况</h1>
            </div>
            <div class="int-top-rt"></div>
        </div>
        <div class="legendbg">
            <p class="zx"><span></span>&nbsp;&nbsp;业务专线</p>
            <p class="hlw"><span></span>&nbsp;&nbsp;互联网(采集)</p>
            
            <p class="yewu"><span></span>&nbsp;&nbsp;专线</p>
        </div>
        <!-- <ul class="num">
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
        <div class="map" id="map" style="display:block"></div>
        <div class="line"><div id="line3" style="display:block"></div></div>
        <div class="map" id="map2"></div>
        <div class="line"><div id="line2"></div></div>
        <div class="map" id="map3"></div>
        <div class="line"><div id="line"></div></div>
    </div>
   <!-- <script src="js/init.js"></script>-->
     <!-- <script src="js/startup2.js"></script>-->
     <!--<script src="js/scale.js"></script>-->

</body>
</html>
